<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>data-img</title>
	<style type="text/css">
		.ct li{
			list-style: none;
			margin: 20px 0;
		}
	</style>
</head>
<body>

<ul class="ct">
  <li data-img="img/1.jpg">鼠标放置查看图片1</li>
  <li data-img="img/2.jpg">鼠标放置查看图片2</li>
  <li data-img="img/3.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
	var ct = document.querySelector(".ct"),
	    childs = ct.querySelectorAll("li"),
	    preview = document.querySelector(".img-preview"); 

	for (var i = 0; i < childs.length; i++) {
		childs[i].addEventListener("mouseenter",function(){
		  var dataImg = this.getAttribute("data-img");
		  preview.innerHTML = '<img  src = " ' + dataImg + '">' ;
		})
	}




</script>
</body>
</html>